// 首页交互功能

document.addEventListener('DOMContentLoaded', function() {
    // 更新时间
    updateTime();
    setInterval(updateTime, 1000);
    
    // 快捷功能点击事件
    setupQuickActions();
    
    // 景点卡片点击事件
    setupAttractionCards();
    
    // 底部导航点击事件
    setupBottomNavigation();
});

// 更新时间显示
function updateTime() {
    const now = new Date();
    const hours = now.getHours().toString().padStart(2, '0');
    const minutes = now.getMinutes().toString().padStart(2, '0');
    
    const timeElement = document.querySelector('.status-bar span');
    if (timeElement) {
        timeElement.textContent = `${hours}:${minutes}`;
    }
}

// 快捷功能设置
function setupQuickActions() {
    const quickActions = document.querySelectorAll('.grid.grid-cols-4 > div');
    
    quickActions.forEach((action, index) => {
        action.addEventListener('click', function() {
            const actionNames = ['景区地图', '打卡拍照', 'AR体验', '语音讲解'];
            
            // 添加点击动画
            this.style.transform = 'scale(0.95)';
            setTimeout(() => {
                this.style.transform = 'scale(1)';
            }, 150);
            
            // 模拟功能跳转
            console.log(`点击了: ${actionNames[index]}`);
            
            // 可以在这里添加实际的页面跳转逻辑
            // window.location.href = 'map.html';
        });
    });
}

// 景点卡片设置
function setupAttractionCards() {
    const attractionCards = document.querySelectorAll('.bg-white.rounded-2xl');
    
    attractionCards.forEach(card => {
        card.addEventListener('click', function() {
            // 添加点击波纹效果
            const ripple = document.createElement('div');
            ripple.className = 'absolute inset-0 bg-black bg-opacity-10 rounded-2xl';
            ripple.style.animation = 'ripple 0.6s ease-out';
            
            this.style.position = 'relative';
            this.appendChild(ripple);
            
            setTimeout(() => {
                ripple.remove();
            }, 600);
            
            console.log('点击了景点卡片');
            // window.location.href = 'attraction.html';
        });
    });
}

// 底部导航设置
function setupBottomNavigation() {
    const navItems = document.querySelectorAll('.fixed.bottom-0 .text-center');
    
    navItems.forEach((item, index) => {
        item.addEventListener('click', function() {
            // 移除所有活动状态
            navItems.forEach(nav => {
                const icon = nav.querySelector('i');
                const text = nav.querySelector('p');
                icon.classList.remove('text-green-600');
                icon.classList.add('text-gray-400');
                text.classList.remove('text-green-600');
                text.classList.add('text-gray-400');
            });
            
            // 设置当前项为活动状态
            const currentIcon = this.querySelector('i');
            const currentText = this.querySelector('p');
            currentIcon.classList.remove('text-gray-400');
            currentIcon.classList.add('text-green-600');
            currentText.classList.remove('text-gray-400');
            currentText.classList.add('text-green-600');
            
            console.log(`切换到: ${currentText.textContent}`);
        });
    });
}

// 添加波纹动画样式
const style = document.createElement('style');
style.textContent = `
    @keyframes ripple {
        0% {
            transform: scale(0);
            opacity: 1;
        }
        100% {
            transform: scale(4);
            opacity: 0;
        }
    }
`;
document.head.appendChild(style);